<template>
    <div>
        <span style="font-size: 25px;margin-left: 50px"><b>案件收入</b></span>
        <hr style="border: 1px dashed darkgray;width: 1360px;transform: scaleY(0.5);margin-bottom: 25px">
        <el-form :model="cpForm" :rules="rules" ref="cpForm" label-width="100px" class="demo-cpForm">
            <el-row>
                <el-col :span="10" :offset=1>
                    <el-form-item label="案件">
                        <el-input v-model="cpForm.caseNo" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset=1>
                    <el-form-item label="已收款">
                        <el-input v-model="cpForm.casePaidsal" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset=1>
                    <el-form-item label="收款金额" prop="money">
                        <el-input v-model.number="cpForm.money" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset=1>
                    <el-form-item label="收款日期">
                        <el-input v-model="cpForm.date" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset=1>
                    <el-form-item label="付款人">
                        <el-input v-model="cpForm.person" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset=1>
                    <el-form-item label="付款方式" prop="payMode">
                        <el-select v-model="cpForm.payMode" style="width: 100%">
                            <el-option label="现金" value="现金"></el-option>
                            <el-option label="支票" value="支票"></el-option>
                            <el-option label="微信" value="微信"></el-option>
                            <el-option label="网银" value="网银"></el-option>
                            <el-option label="支付宝" value="支付宝"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="21" :offset=1>
                    <el-form-item label="备注" prop="">
                        <el-input type="textarea" v-model="cpForm.reason"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-row>
                    <el-col :span="1" :offset=9>
                        <el-button type="primary" @click="submitCpForm('cpForm')" style="margin-left: -10px">立即创建</el-button>
                    </el-col>
                    <el-col :span="1" :offset=2>
                        <el-button @click="resetForm('cpForm')">重置</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>


<!--      付款-->
      <el-dialog
          title="请扫码支付"
          :visible.sync="this.erweima"
          width="15%"
          :before-close="handleClose"
      >
        <component :is="currentCom" v-bind:message="this.cpForm.money"></component>
        <span slot="footer" class="dialog-footer">
  </span>
      </el-dialog>

      <!--      付款结束-->
    </div>

</template>

<script>
//注册付款组件
import   s12 from  './../xzh/cw/s12';
    import AddCaseService from "../../model/AddCaseService";

    const addCaseService=AddCaseService.getInstance();
    export default {
      components:{s12},  //使用
        name: "casePaidsal",
        props:[
            'caseId',
            'caseUnpaidsal'
        ],
        data(){
            var checkMoney= (rule, value, callback) => {
                if(parseInt(value)<100){
                    return callback(new Error('最少100起付!'));
                }else if(parseInt(value)>this.caseUnpaidsal){
                    return callback(new Error('当前最大付款金额为'+this.caseUnpaidsal+'!'));
                }else{
                    callback();
                }
            };
            return{
              setinterval:"", //定时器
              erweima:false, //判断付款二维码是否显示
                cpForm:{
                    caseNo:"",//案号
                    person:"",//付款人
                    money:"",//收款金额
                    casePaidsal:"",//已付金额
                    date:"",//收款日期
                    payMode:"",//付款方式
                    reason:"",//备注
                },
                rules:{
                    money:[
                        {type:"number",required:true,message:"请正确输入付款金额",trigger:"blur"},
                        {validator:checkMoney,trigger: 'blur'}
                    ],
                    payMode:[
                        {required:true,message:"请选择付款方式",trigger:"blur"}
                    ],
                }
            }
        },
        created() {
            this.init()

        },
        methods:{

            init(){
                const params={
                    id:this.caseId
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.cpForm.caseNo=msg.data.data.list[0].caseNo;
                    this.cpForm.person=msg.data.data.list[0].caseWtr;
                    this.cpForm.casePaidsal=msg.data.data.list[0].casePaidsal
                });
                this.cpForm.date=this.$date.formatDate(new Date(),"yyyy-MM-DD")
            },
            submitCpForm(formName) {//提交表单
                this.$refs[formName].validate((valid) => {
                    if (valid) {

   //支付宝支付
 if("支付宝"==this.cpForm.payMode){

   //点击支付后触发 调用二维码组件
   this.currentCom = s12;

   // 休眠1秒钟 /支付宝轮询
   setTimeout(this.lunxunzhifu,1000);
   //支付宝轮询结束.

   // 显示二维码
   this.erweima=true
   //启动定时器 轮询 判断是否支付成功
   this.setinterval=   setInterval(this.lunxunzhifu,1000);
 }
//支付宝结束


                    }
                })
            },
      handleClose() {
        this.$confirm('确认关闭？')
            .then(res=> {
              this.erweima=false
              console.log(res)
              //销毁定时器
              clearTimeout(this.setinterval);
            })
            .catch(res=> {console.log(res)});
      },
            resetForm(formName) {//重置表单
                this.$refs[formName].resetFields();
            },
          //支付宝轮询
          //轮询 查询是否支付成功
          lunxunzhifu(){
            this.$http.get("/lunxun").then(res=>{
              console.log("是否支付成功的状态"+res.data)
              //轮询的状态 交给 this.zhifu
              //如果支付成功后   销毁定时器  并且添加 跳页面
              if(true==res.data){
                //销毁定时器
                clearTimeout(this.setinterval);
                //关闭二维码
                this.erweima=false;
                //并提醒 支付成功
                this.$message({
                  type: "success",
                  message: "支付成功~"
                });
                //付款成功开始添加
                //    console.log(this.route.cwInoutTypeId)
                const param=new URLSearchParams();
                param.append("id",this.caseId);
                param.append("casePaidsal",this.cpForm.money);
                param.append("caseUnpaidsal",this.cpForm.money);
                param.append("type",1);
                addCaseService.upCaseLaw(this.$http,param).then(msg=>{
                  if (msg.data.status === "50000") {
                    this.$message({
                      type: "error",
                      message: "出错了呢~"
                    })
                  } else {

                    this.$emit("changeActive")
                  }
                });
              }
            })
          },
          //支付宝轮询结束
        },
    }
</script>

<style scoped>

</style>